import React from 'react';
import {Input, Button, Select, Checkbox, Radio, Form, TreeSelect, Icon, Col, DatePicker, InputNumber} from 'antd'
import Utils from '../../utils/utils'
import './index.less'
import {connect} from 'react-redux'

const {RangePicker} = DatePicker;
const {TextArea} = Input;
const TreeNode = TreeSelect.TreeNode;
const FormItem = Form.Item;
const Option = Select.Option;
const dateFormat = 'YYYY-MM-DD';

/**
 * 表单封装
 */
class SearchBar extends React.Component {
    state = {
        colWidth: 270,
    };
    handleFilterSubmit = () => {//提交（传递表单数据）
        let fieldsValue = this.props.form.getFieldsValue();//获取表单数据
        this.props.filterSubmit(fieldsValue);
    };

    rest = () => {//重置
        this.props.form.resetFields();
    };

    getTree(data) {
        if (data) {
            return data.map((item, index) => {
                if (item.children) {
                    return (
                        <TreeNode icon={<Icon type="home"/>} title={item.name} key={item.id} value={item.id}>
                            {this.getTree(item.children)}
                        </TreeNode>
                    )
                }
            })
        }
    }

    initFormList = () => {
        let defaultFormItemLayout = {
            labelCol: {
                xs: {span: 8},
                sm: {span: 8},
                md: {span: 8},
                lg: {span: 8},
                xl: {span: 8},
            },
            wrapperCol: {
                xs: {span: 16},
                sm: {span: 16},
                md: {span: 16},
                lg: {span: 16},
                xl: {span: 16},
            },
        };
        const {getFieldDecorator} = this.props.form;
        const formList = this.props.formList;
        let formItemList = [];
        if (formList && formList.length > 0) {
            formList.forEach((item) => {
                let label = item.label;
                let field = item.field;
                let initialValue = '';
                if (item.type === 'CHECKBOX') {
                    initialValue = item.initialValue || false;
                } else {
                    let initialValue = item.initialValue || '';
                }

                let placeholder = item.placeholder;
                let width = item.width;
                if (item.type === 'INPUT') {
                    const INPUT =
                        <Col className="search_bar_col" key={field}>
                            <FormItem label={label} key={field} {...defaultFormItemLayout}>
                                {
                                    getFieldDecorator(field, {
                                        initialValue: initialValue
                                    })(
                                        <Input type="text" placeholder={placeholder}/>
                                    )
                                }
                            </FormItem>
                        </Col>;
                    formItemList.push(INPUT);
                } else if (item.type === 'SELECT') {
                    const SELECT =
                        <Col className="search_bar_col" key={field}>
                            <FormItem label={label} key={field} {...defaultFormItemLayout}>
                                {
                                    getFieldDecorator(field, {
                                        initialValue: initialValue
                                    })(
                                        <Select
                                            allowClear
                                            placeholder={placeholder}
                                        >
                                            {Utils.getOptionList(item.list)}
                                        </Select>
                                    )
                                }
                            </FormItem>
                        </Col>;
                    formItemList.push(SELECT);
                } else if (item.type === 'CHECKBOX') {
                    const CHECKBOX = <FormItem label={label} key={field}>
                        {
                            getFieldDecorator(field, {
                                initialValue: initialValue,//true|false
                                valuePropName: 'checked',
                            })(
                                <Checkbox></Checkbox>
                            )
                        }
                    </FormItem>
                    formItemList.push(CHECKBOX);
                } else if (item.type === 'TREESELECT') {
                    const TREESELECT =
                        <Col className="search_bar_col" key={field}>
                            <FormItem label={label} key={field} {...defaultFormItemLayout}>
                                {
                                    getFieldDecorator(field, {
                                        initialValue: initialValue,
                                    })(
                                        <TreeSelect
                                            // showSearch  是否可搜索
                                            dropdownStyle={{maxHeight: 400, overflow: 'auto'}}
                                            placeholder="请选择部门"
                                            allowClear
                                        >
                                            <TreeNode icon={<Icon type="home"/>} title={this.props.addition.name}
                                                      value={this.props.addition.id} key="0-0">
                                                {this.getTree(this.props.addition.children)}
                                            </TreeNode>
                                        </TreeSelect>
                                    )
                                }
                            </FormItem>
                        </Col>;
                    formItemList.push(TREESELECT);
                } else if (item.type === 'InputNumberRange') {
                    const begin_time =
                        <Col className="search_bar_col_test"
                             key={field}>
                            <FormItem label={label} key={field} style={{width:180}}
                                      labelCol={{span:12}}
                                      wrapperCol={{
                                          span: 12
                                      }}
                            >
                                {
                                    getFieldDecorator(field + '_start')(
                                        <InputNumber style={{width: 90}}/>
                                    )
                                }
                            </FormItem>
                            <FormItem label="~" colon={false} key={field + 1} style={{width:90}}
                                      labelCol={{
                                          span: 6
                                      }}
                                      wrapperCol={{
                                          span: 18
                                      }}
                            >
                                {
                                    getFieldDecorator(field + '_end')(
                                        <InputNumber style={{width: 90}}/>
                                    )
                                }
                            </FormItem>
                        </Col>;
                    formItemList.push(begin_time);
                    // const end_time =
                    //     <Col className="search_bar_col" style={{width: this.state.colWidth / 2,}} key={field + 1}>
                    //         <FormItem label="~" colon={false} key={field + 1}
                    //                   labelCol={{
                    //                       span: 6
                    //                   }}
                    //                   wrapperCol={{
                    //                       span: 18
                    //                   }}
                    //         >
                    //             {
                    //                 getFieldDecorator(field + '_end')(
                    //                     <InputNumber style={{width: 80}}/>
                    //                 )
                    //             }
                    //         </FormItem>
                    //     </Col>;
                    // formItemList.push(end_time)
                } else if (item.type === 'DateRange') {
                    const DateRange =
                        <Col className="search_bar_col" style={{width: 360}} key={field}>
                            <FormItem label={label} key={field}
                                      labelCol={{
                                          span: 6
                                      }}
                                      wrapperCol={{
                                          span: 16
                                      }}>
                                {
                                    getFieldDecorator(field, {
                                        initialValue: initialValue,

                                    })(
                                        <RangePicker
                                            style={{width: 280}}
                                            showTime={{format: 'HH:mm'}}
                                            format="YYYY-MM-DD HH:mm"
                                            placeholder={['开始时间', '结束时间']}
                                        />
                                    )
                                }
                            </FormItem>
                        </Col>;
                    formItemList.push(DateRange)
                }
                //如果不需要冒号：<FormItem label="~" colon={false}>

            })
        }
        return formItemList;
    };

    render() {
        return (
            <div>
                <Form>
                    <div className="search_bar">
                        {this.initFormList()}
                        <FormItem>
                            <div className="search_bar_button">
                                <Button type="primary" style={{margin: '0 20px'}}
                                        onClick={this.handleFilterSubmit}>查询</Button>
                                <Button onClick={this.rest}>重置</Button>
                            </div>
                        </FormItem>
                    </div>
                </Form>
            </div>

        )
    }
};
const mapStateToProps = (state) => {
    return {
        navLeft: state.navLeft,
    }
};
export default connect(mapStateToProps)(Form.create({})(SearchBar));